<template>
  <div>
    <h2>BsInfo</h2>
    <p> username:{{ username }} </p>
    <p> age:{{ age }} </p>
    <p> maxSize:{{ maxSize }} </p>
    <p> isAllow:{{ isAllow }} </p>
    <p> hobby:{{ hobby }} </p>
    <p> size:{{ size }} </p>
    <p> gender:{{ gender }} </p>
    <p> cb:{{ cb() }} </p>
  </div>
</template>

<script setup>
// const props = defineProps(['username']);
const props = defineProps({
  username: {
    type: String,
    default(value) {
      return 'rose' + value.maxSize
    }
  },
  age: {
    type: [Number, String],
    default: 20,
  },
  maxSize: {
    type: Number,
    required: true,//必填
  },
  isAllow: {
    // type: [String, Boolean],
    type: [Boolean, String],
    required: true,
  },
  hobby: Array,
  size: Object,
  gender: {
    validator(value) {
      return ['boy', 'girl'].includes(value);
    }
  },
  phone: {
    validator(value) {
      return /^(?:(?:\+|00)86)?1\d{10}$/.test(value);
    }
  },
  cb: {
    type: Function,
    default() {
      return 'hi'
    }
  }
});


console.log(props);
</script>

<style></style>